<template>
    <div>
        <el-card class="box-card">
            <el-select v-model="queryData.screenSize" placeholder="屏幕大小" size="small" @change="screenSizeChange">
                <el-option v-for="item in dictionary.screenSize" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
            </el-select>
            <el-input :disabled="queryData.screenSize == 'custom' ? false : true" size="small" v-model="queryData.screenWidth" placeholder="屏幕宽度"></el-input>
            <el-input :disabled="queryData.screenSize == 'custom' ? false : true" size="small" v-model="queryData.screenHeight" placeholder="屏幕高度"></el-input>
            <el-button size="small" type="primary" @click="resetQueryHandle">重置</el-button>
        </el-card>
        <div class="interspaceH"></div>
        <el-card>
            <div class="box" style="display:flex;flex-wrap: wrap;justify-content: space-between">
                <el-card v-for="(item, index) in templateList" :key="index" style="margin: 20px 20px 0 0">
                    <div slot="header" class="clearfix">
                        <span>{{ item.name }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="setSendRuleHandle">设置推送规则</el-button>
                    </div>
                    <iframe :src="'http://wx.zzxapps.com/pages/overview/index?data=' + JSON.stringify(item.data)" :style="{'border': '0','width': queryData.screenWidth + 'px','height': queryData.screenHeight + 'px'}"></iframe>
                </el-card>
            </div>
        </el-card>

        <SetSendRule ref="setSendRule"/>
    </div>
</template>

<script>

import SetSendRule from "@/views/smartManagement/data_send/set_send_rule"

const initQueryData = {
    screenSize: 'custom',
    screenWidth: '375',
    screenHeight: '812'
}

//屏幕大小，width * height
const screenSize = [
    {
        label: 'Moto G4',
        value: '360*640'
    },
    {
        label: 'Pixel',
        value: '411*731'
    },
    {
        label: 'iphone 5/SE',
        value: '320*568'
    },
    {
        label: 'iphone 6/7/8',
        value: '375*667'
    },
    {
        label: 'iphone 6/7/8 Plus',
        value: '375*736'
    },
    {
        label: 'iphone X',
        value: '375*812'
    },
    {
        label: 'iPad',
        value: '768*1024'
    },
    {
        label: 'iPad Pro',
        value: '1024*1366'
    },
    {
        label: 'Galaxy Fold',
        value: '280*653'
    },
    {
        label: '自定义',
        value: 'custom'
    }
]

export default {
    name: "index",
    components: {
        SetSendRule
    },
    data() {
        return {
            queryData: {...initQueryData},
            dictionary: {
                screenSize: screenSize
            },
            templateList: [
                {
                    data: {rankField:{value:'1',label:'新增客户数'},type:'1',showTitle:true},
                    name: '新增客户'
                },
                {
                    data: {rankField:{value:'2',label:'流失客户数'},type:'1',department:{value:'2',label:'教研部'}},
                    name: '流失客户'
                },
                {
                    data: {rankField:{value:'3',label:'成单数'},type:'1',checkDate:{value:'1',label:'今日'}},
                    name: '成单'
                },
                {
                    data: {rankField:{value:'4',label:'电话接通数'},type:'1'},
                    name: '电话接通'
                },
                {
                    data: {rankField:{value:'5',label:'电话外呼数'},type:'1'},
                    name: '电话外呼'
                },
                {
                    data: {type:'2'},
                    name: '图标'
                }
            ]
        }
    },
    mounted() {

    },
    methods: {
        resetQueryHandle() {
            this.queryData = {...initQueryData}
        },
        screenSizeChange(e) {
            if (e != 'custom') {
                let arr = e.split('*')
                this.queryData['screenWidth'] = arr[0]
                this.queryData['screenHeight'] = arr[1]
            }
        },
        setSendRuleHandle() {
            this.$refs.setSendRule.open()
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 120px;
}
.box:after {
    content:"";
    width: 27%;
}
</style>
